<template>
  <div>
    <div v-if="!repoUrl">loading</div>
    <div v-else>most star repo is <a :href="repoUrl">{{repoName}}</a></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
    repoUrl:'',//仓库的连接
    repoName : '',//仓库的名字
    }
  },

  mounted(){
    //发Ajax请求资源
    const url=`https://api.github.com/search1/repositories?q=v&sort=stars`
    /* this.$http.get(url).then(
      response=>{
        //成功了
        const result = response.data
        //得到最受欢迎的repo
        const mostRepo = result.items[0];
        this.repoUrl = mostRepo.html_url;
        this.repoName = mostRepo.name;
      },
      response =>{
        alert('请求失败');
      }) */
    
    // 使用axios发送ajax请求
    axios.get(url).then(response=>{
        //成功了
        const result = response.data
        //得到最受欢迎的repo
        const mostRepo = result.items[0];
        this.repoUrl = mostRepo.html_url;
        this.repoName = mostRepo.name;
      }).catch(error=>{
        alert('请求失败');
      })
      
  }
}
</script>

<style>

</style>